<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Ghost实现归档、标签云、搜索 - Feng&#39;s Blog - 大灰鼠的博客</title>
  <meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">


<meta name="author" content="Feng" /><meta name="description" content="前面说过，Ghost本身并不自带类似文章归档、标签云，搜索等（后台不知道会不会改进），虽然官方没有给出，但这也不能阻止民间高手们，通过API" /><meta name="keywords" content="feng, 折腾人生, 电脑维修, 手机玩转, 技术心得, 拆机, 网站建设, 快乐悠悠, uu, 悠悠, 博客" />






<meta name="generator" content="Hugo 0.76.5 with theme even" />


<link rel="canonical" href="https://uu126.gitee.io/2017/370.html" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">



<link href="/sass/main.min.c7bc1becf36bcf6a9ebd25d2947e43a2eb745ddb0c9a32b43126fd7fa460c351.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">


<meta property="og:title" content="Ghost实现归档、标签云、搜索" />
<meta property="og:description" content="前面说过，Ghost本身并不自带类似文章归档、标签云，搜索等（后台不知道会不会改进），虽然官方没有给出，但这也不能阻止民间高手们，通过API" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://uu126.gitee.io/2017/370.html" />
<meta property="article:published_time" content="2017-07-25T20:52:00+00:00" />
<meta property="article:modified_time" content="2017-07-25T20:52:00+00:00" />
<meta itemprop="name" content="Ghost实现归档、标签云、搜索">
<meta itemprop="description" content="前面说过，Ghost本身并不自带类似文章归档、标签云，搜索等（后台不知道会不会改进），虽然官方没有给出，但这也不能阻止民间高手们，通过API">
<meta itemprop="datePublished" content="2017-07-25T20:52:00+00:00" />
<meta itemprop="dateModified" content="2017-07-25T20:52:00+00:00" />
<meta itemprop="wordCount" content="1590">



<meta itemprop="keywords" content="Ghost,随笔," />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Ghost实现归档、标签云、搜索"/>
<meta name="twitter:description" content="前面说过，Ghost本身并不自带类似文章归档、标签云，搜索等（后台不知道会不会改进），虽然官方没有给出，但这也不能阻止民间高手们，通过API"/>

<!--[if lte IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

</head>
<body>
  <div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/" class="logo">Feng&#39;s Blog</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    <a href="/">
        <li class="mobile-menu-item">Home</li>
      </a><a href="/post/">
        <li class="mobile-menu-item">Archives</li>
      </a><a href="/tags/">
        <li class="mobile-menu-item">Tags</li>
      </a><a href="/links/">
        <li class="mobile-menu-item">Links</li>
      </a><a href="/ly/">
        <li class="mobile-menu-item">Ly</li>
      </a><a href="/about/">
        <li class="mobile-menu-item">About</li>
      </a>
  </ul>
</nav>
  <div class="container" id="mobile-panel">
    <header id="header" class="header">
        <div class="logo-wrapper">
  <a href="/" class="logo">Feng&#39;s Blog</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
        <a class="menu-item-link" href="/">Home</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/post/">Archives</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/tags/">Tags</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/links/">Links</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/ly/">Ly</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/about/">About</a>
      </li>
  </ul>
</nav>
    </header>

    <main id="main" class="main">
      <div class="content-wrapper">
        <div id="content" class="content">
          <article class="post">
    
    <header class="post-header">
      <h1 class="post-title">Ghost实现归档、标签云、搜索</h1>

      <div class="post-meta">
        <span class="post-time"> 2017-07-25 </span>
        <div class="post-category">
            <a href="/categories/%E6%88%91%E7%9A%84%E5%9C%B0%E7%9B%98/"> 我的地盘 </a>
            </div>
          <span class="more-meta"> 约 1590 字 </span>
          <span class="more-meta"> 预计阅读 4 分钟 </span>
        
      </div>
    </header>

    <div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">文章目录</h2>
  <div class="post-toc-content always-active">
    <nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li>
          <ul>
            <li></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>
  </div>
</div>
    <div class="post-content">
      <p>前面说过，Ghost本身并不自带类似文章归档、标签云，搜索等（后台不知道会不会改进），虽然官方没有给出，但这也不能阻止民间高手们，通过API就能实现上述这些功能。</p>
<h4 id="归档">归档</h4>
<ul>
<li>
<p>首先得在后台的 <code>实验功能</code> 中启用 <code>API</code> ，如图:<br>
<img   class="lazyload" data-src="https://cdn.uu126.cn/image/a/63/912947500d1432b9e4c07155674de.jpg" src="https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.2/img/svg/loader/trans.ajax-spinner-preloader.svg" onerror="imgError(this)"  alt="" title="" />
<noscript>
<img src="https://cdn.uu126.cn/image/a/63/912947500d1432b9e4c07155674de.jpg" alt="" title="" /></li>
</noscript></p>
</li>
<li>
<p>新建自定义页面：</p>
</li>
</ul>
<p>1.创建一个静态页面：在ghost后台新建页面，发布为 独立页面 ，标题为Archives，网址可以设置为 <code>域名/archives-post</code></p>
<p>2.接着创建一个自定义页面模板：该模板是第一步创建的静态页面的模板，创建一个page-url.hbs模板，如果第一步设置的页面网址为 <code>域名/archives-post</code> ，那么模板即为 <code>page-archives-post.hbs</code> 。将该模板上传至主题根目录下即可，此时访问域名/archives-post，即会调用自定义的page-archives-post.hbs这个模板。</p>
<ul>
<li>在page-archives.hbs中调用Ghost API即可：</li>
</ul>
<pre><code class="lang-php">{{!&lt; default}}
/**
 * 调用ghost API，完成文章归档功能
 * 所需组件：jQuery、moment.js
 * @ldsun.com
 */
jQuery(document).ready(function() {
    //获取所有文章数据，按照发表时间排列
    $.get(ghost.url.api('posts', {
        limit: 'all',
        order: "published_at desc"
    })).done(function(data) {
        var posts = data.posts;
        var count = posts.length;
        for (var i = 0; i &lt; count; i++) {
            //调用comentjs对时间戳进行操作
            //由于ghost默认是CST时区，所以日期会有出入，这里消除时区差,如果不需要，把下面第二行后面8小时改为-00:00!!!
            var time = moment(posts[i].published_at).utcOffset("-08:00");
            var year = time.get('y');
            var month = time.get('M')+1;
            var date = time.get('D');
            if( date 0) {
                var pre_month = moment(posts[i - 1].published_at).utcOffset("-08:00").get('month')+1;
                //如果当前文章的发表月份与前篇文章发表月份相同，则在该月份ul下插入该文章，这里消除时区差,如果不需要，把下面第二行后面8小时改为-00:00!!!
                if (month == pre_month) {
                    var html = ""+date+"日"+title+"";
                    $(html).appendTo(".archives .list-"+year+"-"+month);
                }
                //当月份不同时，插入新的月份
                else{
                    var html = " "+year+"-"+month+""+date+"日"+title+"";
                    $(html).appendTo('.archives');
                }
            }else{
                var html = " "+year+"-"+month+""+date+"日"+title+"";
                $(html).appendTo('.archives');
            }
        }
    }).fail(function(err) {
        console.log(err);
    });
});
</code></pre>
<p>相应的CSS代码如下：</p>
<pre><code class="lang-css">.archives .item {
}
.archives h3 {
    font-size: 17px;
    font-weight: bold;
    margin: 0 0 15px 0;
}
.archives-list {
    list-style: none;
    font-size: 16px;
    line-height: 20px;
    padding-left: 25px;
}
.archives-list li {
    padding: 3px 0;
    overflow: hidden;
}
.archives-list time {
    margin-right: 5px;
    color: #999;
    display: inline-block;
    width: 35px;
    font-family: monospace;
}
.archives-list a {
    text-decoration: none;
}</code></pre>
<h4 id="标签云">标签云</h4>
<ul>
<li>介绍一下 <code>tag_cloud</code></li>
</ul>
<p>这是中文版中增加的一个 handlebars 助手（helper），根据标签所关联的文章数量进行逆排序，也就是关联文章多的先输出；支持一个 limit 参数，用于限定输出的标签数量：all 表示输出所有标签；数字（例如 10）指定输出个数。调用方式如下：</p>
<pre><code class="lang-php">//输出所有标签
{{tag_cloud limit="all"}}
或者
//输出前20个标签（标签按照对应的文章数量逆排序）
{{tag_cloud limit=20}}</code></pre>
<ul>
<li>使用方法</li>
</ul>
<p>在需要输出“标签云”的地方调用 <code>tag_cloud</code> 助手即可。我们以 casper 默认主题为例。打开 <code>index.hbs</code> 文件，在  ``标签后面添加 <code>{{tag_cloud limit=10}}</code> ，保存此文件、重启 Ghost、打开首页，看看是否输出了一堆标签。我是直接放在归档里的，具体放哪又或是新增页面就看各自喜好了，相应的css代码如下：</p>
<pre><code class="lang-css">.tag-cloud {
    padding-left: 25px;
}
.tag-cloud {
    padding-left: 1.725rem;
}
.tag-cloud a:hover {
    background: #eee;
    color: #4A4A4A;
}
.tag-cloud a {
    position: relative;
    display: inline-block;
    padding: .725rem;
    font-style: normal;
    line-height: 1.125rem;
    border-radius: .3rem;
    text-decoration: none;
    font-size: 16px;
    margin-bottom: 3px;
}</code></pre>
<h4 id="搜索">搜索</h4>
<p>使用 <code>jQuery.gsearch.js</code> 插件实现Ghost博客的搜索，gsearch是一款为Ghost量身打造的搜索插件，使Ghost轻松具有搜索功能。效果类似于SwifType，通过Ghost的RSS实现搜索功能，您可以点击右上角搜索图标体验效果。</p>
<ul>
<li><a href="https://github.com/itobee/gsearch/archive/master.zip" target="_blank"  rel="nofollow" >下载</a>最新版的gsearch，将 <code>dist</code> 文件夹下的 <code>libs</code> 和 <code>partials</code> 文件夹复制到当前主题的根目录下（如果遇到同名文件夹，覆盖即可），并在当前主题的 <code>default.hbs</code> 文件中添加如下代码：</li>
</ul>
<pre><code class="lang-html">
   ……
   ……
   ……
   {{&gt; "gsearch"}}
  </code></pre>
<ul>
<li>接下来，我们再通过如下代码调用插件即可使用：</li>
</ul>
<pre><code class="lang-python">
$(document).one('opening', '.remodal', function () {
    $('#search').gsearch();
});
  </code></pre>
<p>这段代码我是直接丢在后台的 <code>插入代码</code> 里<br>
注：以上示例使用了 <code>remodal</code> 弹层插件显示搜索信息，可以用其他插件代替，但是需要注意一点：请勿对同一元素重复调用插件。示例中使用jQuery的 <code>.one()</code> 方法来委托事件。<br>
关于搜索功能等信息，可详见原作者<a href="http://www.tobee.me/gsearch/" target="_blank"  rel="nofollow" >博客</a></p>
<p>实现了这三个功能，暂时可以让我消停一下了，要知道菜鸟要实现这些功能可也是花了好久功夫的，这个过程还是挺享受的，这不现地又得找点可以折腾的东西来……</p>

    </div>

    <div class="post-copyright">
  <p class="copyright-item">
    <span class="item-title">文章作者</span>
    <span class="item-content">Feng</span>
  </p>
  <p class="copyright-item">
    <span class="item-title">上次更新</span>
    <span class="item-content">
        2017-07-25
        
    </span>
  </p>
  
  
</div>
<div class="post-reward">
  <input type="checkbox" name="reward" id="reward" hidden />
  <label class="reward-button" for="reward">赞赏支持</label>
  <div class="qr-code">
    
    <label class="qr-code-image" for="reward">
        <img class="image" src="https://cdn.uu126.cn/hugo/wechat.png">
        <span>微信打赏</span>
      </label>
    <label class="qr-code-image" for="reward">
        <img class="image" src="https://cdn.uu126.cn/hugo/alipay.png">
        <span>支付宝打赏</span>
      </label>
  </div>
</div><footer class="post-footer">
      <div class="post-tags">
          <a href="/tags/ghost/">Ghost</a>
          <a href="/tags/%E9%9A%8F%E7%AC%94/">随笔</a>
          </div>
      <nav class="post-nav">
        <a class="prev" href="/2017/371.html">
            <i class="iconfont icon-left"></i>
            <span class="prev-text nav-default">信用卡&#34;黑话&#34;</span>
            <span class="prev-text nav-mobile">上一篇</span>
          </a>
        <a class="next" href="/2017/369.html">
            <span class="next-text nav-default">似乎又开始折腾了</span>
            <span class="next-text nav-mobile">下一篇</span>
            <i class="iconfont icon-right"></i>
          </a>
      </nav>
    </footer>
  </article>
        </div>
        

  
  <div id="vcomments"></div>
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
  <script type="text/javascript">
    new Valine({
        el: '#vcomments' ,
        appId: '5sMkTX4FLjetFnfbOhaDTCDJ-9Nh9j0Va',
        appKey: '25KXCqIqAN142RQn4fBrsI87',
        notify:  false ,
        verify:  false ,
        avatar:'mm',
        placeholder: '说点什么吧...',
        visitor:  false 
    });
  </script>

  

      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="social-links">
  <a href="https://uu126.gitee.io/index.xml" type="application/rss+xml" class="iconfont icon-rss" title="rss"></a>
</div>

<div class="copyright">
  <span class="copyright-year">  
  Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a> + <a href="https://cloud.tencent.com/redirect.php?redirect=1005&cps_key=4e78216aea817227ff0c96d93a00fd4b" target="_blank" rel="nofollow">腾讯云 + </a><a href="https://console.upyun.com/register/?invite=S1JeTquHL" target="_blank" rel="nofollow"><span class="with-love"><img src="https://cdn.lancn.cn/images/upyun.png" style="width:45px;vertical-align:middle;" alt="又拍云存储"></span></a>
   </span> 
  <div class="busuanzi-footer">
    <a target="_blank"  href="http://www.beian.miit.gov.cn">浙ICP备11026647号-3</a><span class="post-meta-divider"> | </span><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33088102001325"><span class="with-love"><img src="https://cdn.uu126.cn/icon-police.png" style="width:14px;"></span> 浙公网安备33088102001325号</a>
  </div>
  <span class="power-by">
    由 <a class="hexo-link" href="https://gohugo.io">Hugo</a> 强力驱动
  </span>
  <span class="division">|</span>
  <span class="theme-info">
    主题 - 
    <a class="theme-link" href="https://github.com/olOwOlo/hugo-theme-even">Even</a>
  </span>
   

  

  <span class="copyright-year">
    &copy; 
    2012 - 
    2020<span class="heart"><i class="iconfont icon-heart"></i></span><span>Feng</span>
  </span>
</div>

    </footer>

    <div class="back-to-top" id="back-to-top">
      <i class="iconfont icon-up"></i>
    </div>
  </div>
  <script src="/lib/highlight/highlight.pack.js?v=20171001"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>



<script type="text/javascript" src="/js/main.min.c12618f9a600c40bd024996677e951e64d3487006775aeb22e200c990006c5c7.js"></script>








</body>
</html>
